<template>
  <view class="footer_menu">
    <view class="menu" :class="{on:index===1}" @tap="btnUrl('/pages/index/index')">
        <image class="icon-img1" :src="index===1?'/static/footer/1.png':'/static/footer/01.png'" />
    </view>
    <view class="menu" :class="{on:index===2}" @tap="btnUrl('/pages/index/index')">
        <image class="icon-img2" :src="index===2?'/static/footer/2.png':'/static/footer/02.png'" />
    </view>
    <view class="menu" :class="{on:index===3}" @tap="btnUrl('/pages/index/index')">
        <image class="icon-img" :src="index===3?'/static/footer/3.png':'/static/footer/03.png'" />
    </view>
    <view class="menu" :class="{on:index===4}" @tap="btnUrl('/pages/user/user')">
        <image class="icon-img3" :src="index===4?'/static/footer/4.png':'/static/footer/04.png'" />
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      msg: '',
      aaa: "",
    };
  },
  props:{
      index: {
      type: Number,
      default: 1,
    },
  },
  methods: {
    btnUrl(Url){
      	uni.redirectTo({ url: Url});
    }
  },
};
</script>
<style  lang="scss" scoped>
  .footer_menu {
    height: px2vw(67);
    width: 100%;
    font-size: px2vw($fz16);
    position: fixed;
    bottom: 0;
    border-top: 1px solid #eee;
    left: 50%;
    margin-left: -50%;
    display: flex;
    background: #fff;
    z-index: 9999;
  }
  .footer_menu .menu{
    width: 33.3%;
    line-height:  px2vw(67); 
    font-size: px2vw($fz16);
    text-align: center;
    .icon-img2,
    .icon-img3,
    .icon-img1,
    .icon-img{
        height:px2vw(33); 
        width:px2vw(26);
        vertical-align: middle;
    }
    .icon-img2{
          height:px2vw(30); 
         width:px2vw(30);
    }
    .icon-img1{
        height:px2vw(36); 
         width:px2vw(28);
    }
     .icon-img3{
        height:px2vw(33); 
         width:px2vw(33);
     }
  }
  .footer_menu .menu.on{
    color: red;
  }
</style>
